<template>
  <div class="app-custom-manage">
    <div class="container">
      <el-tabs v-model="isActive" @tab-click="handleClick">
        <el-tab-pane
          v-for="item in isTabList"
          :label="item.label + (item.counts > 0 ? '(' + item.counts + ')' : '')"
          :name="item.label"
          :key="item.label"
        />
      </el-tabs>
      <search-bar v-model="queryParams" :config="searchs" @search="handleSearch" @searchReset="handleSearchReset" />
    </div>
    <div class="line"></div>
    <table-page
      :tableData="tableData"
      :tableColumn="tableColumn"
      :isIndex="false"
      :isStar="true"
      :isSelection="true"
      :min-width="150"
      :total="pages.total"
      :pageSize="pages.pageSize"
      :currentPage="pages.pageNum"
      @sizeChange="handleSizeChange"
      @currentChange="handleCurrentChange"
    >
      <template #handle>
        <el-button type="primary">新建客户</el-button>
        <el-button>批量操作</el-button>
      </template>
    </table-page>
  </div>
</template>

<script>
import SearchBar from '@/components/SearchBar'
import TablePage from '@/components/TablePage'

export default {
  name: 'CustomManage',
  components: {
    SearchBar,
    TablePage,
  },
  data: function () {
    return {
      queryParams: {},
      searchs: [
        {
          prop: 'name',
          type: 'input',
          placeholder: '客户名称',
        },
        {
          prop: 'phone',
          type: 'input',
          placeholder: '联系人手机号',
        },
        {
          prop: 'origin',
          type: 'select',
          placeholder: '客户来源',
        },
        {
          prop: 'type',
          type: 'select',
          placeholder: '客户类型',
        },
        {
          prop: 'date',
          type: 'daterange',
          startPlaceholder: '跟进时间起',
          endPlaceholder: '跟进时间止',
        },
      ],
      tableData: [
        {
          star: true,
          name: '广州佛山同圣科',
          status: '华南-新建（待审核）',
          origin: '电话咨询',
          phone: '13023178099',
          email: 'chenysh@163.com',
          address: '山东省济南市',
          type: '国企',
          tag: '普通',
        },
        {
          name: '广州佛山同圣科',
          status: '华南-新建（待审核）',
          origin: '电话咨询',
          phone: '13023178099',
          email: 'chenysh@163.com',
          address: '山东省济南市',
          type: '国企',
          tag: '普通',
        },
        {
          name: '广州佛山同圣科',
          status: '华南-新建（待审核）',
          origin: '电话咨询',
          phone: '13023178099',
          email: 'chenysh@163.com',
          address: '山东省济南市',
          type: '国企',
          tag: '普通',
        },
        {
          name: '广州佛山同圣科',
          status: '华南-新建（待审核）',
          origin: '电话咨询',
          phone: '13023178099',
          email: 'chenysh@163.com',
          address: '山东省济南市',
          type: '国企',
          tag: '普通',
        },
        {
          name: '广州佛山同圣科',
          status: '华南-新建（待审核）',
          origin: '电话咨询',
          phone: '13023178099',
          email: 'chenysh@163.com',
          address: '山东省济南市',
          type: '国企',
          tag: '普通',
        },
      ],
      tableColumn: [
        {
          label: '客户名称',
          prop: 'name',
        },
        {
          label: '跟进状态',
          prop: 'status',
          width: 200,
        },
        {
          label: '客户来源',
          prop: 'origin',
        },
        {
          label: '联系人手机号',
          prop: 'phone',
        },
        {
          label: '邮箱',
          prop: 'email',
        },
        {
          label: '地址',
          prop: 'address',
        },
        {
          label: '客户类型',
          prop: 'type',
        },
        {
          label: '客户标签',
          prop: 'tag',
        },
        {
          label: '操作',
          prop: 'action',
          fixed: 'right',
          type: 'button',
          width: 220,
          buttons: [
            {
              label: '查看',
              type: 'text',
              color: 'rgba(0, 118, 255, 1)',
              method: '',
            },
            {
              label: '编辑',
              type: 'text',
              color: 'rgba(0, 118, 255, 1)',
              method: '',
            },
            {
              label: '审核',
              type: 'text',
              color: 'rgba(0, 118, 255, 1)',
              method: '',
            },
            {
              label: '作废',
              type: 'text',
              color: 'rgba(0, 118, 255, 1)',
              method: '',
            },
            {
              label: '跟进',
              type: 'text',
              color: 'rgba(0, 118, 255, 1)',
              method: '',
            },
          ],
        },
      ],
      pages: {
        total: 0,
        pageNum: 1,
        pageSize: 10,
      },
      isActive: '全部客户',
      isTabList: [
        { label: '全部客户', counts: 0 },
        { label: '我负责的客户', counts: 10 },
        { label: '下属负责的客户', counts: 20 },
        { label: '我关注的客户', counts: 5 },
      ],
    }
  },
  methods: {
    getTableData() {},
    handleClick() {},
    handleSearch() {},
    handleSearchReset() {},
    handleSearch() {
      this.pages.pageNum = 1
      this.getTableData()
    },
    handleSearchReset() {
      this.pages.pageNum = 1
      this.getTableData()
    },
    handleSizeChange(v) {
      this.pages.pageSize = v
      this.pages.pageNum = 1
      this.getTableData()
    },
    handleCurrentChange(v) {
      this.pages.pageNum = v
      this.getTableData()
    },
  },
}
</script>

<style lang="scss" scoped>
.container {
  padding: 24px 30px;
  box-sizing: border-box;
}
.line {
  height: 20px;
  background: $app-main-bgc;
}
::v-deep.el-tabs {
  .el-tabs__nav-wrap::after {
    height: 1px;
    background-color: #d8d8d8;
  }
  .el-tabs__active-bar {
    height: 3px;
    background-color: rgba(0, 118, 255, 1);
  }
  .el-tabs__item {
    font-size: 14px;
    color: #666666;
    line-height: 20px;
    &.is-active {
      color: rgba(9, 26, 61, 1);
    }
  }
}
</style>
